<!DOCTYPE html>
<html>
<head>
    <title>粒子</title>
    <meta content="text/html" charset="UTF-8">
    <script src="./JS/easel.js" type="text/javascript"></script>
    <script src="./JS/Vector3.js" type="text/javascript"></script>
    <script src="./JS/tools.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var stage ;

    var r = 250;
    var centerPosition = new Vector3(300,300,0);
    var cameraPosition = new Vector3(300,300,400);
    var distance = 300;

    var starPoints = [];
    var starPointsForShow = [];
    var k = 1;
    for(var i=0;i<5;i++){
        var tempX = getRandomNumber(-250,250);
        var tempY = getRandomNumber(-250,250);
        if(tempX*tempX + tempY*tempY < r*r){
            k *= -1;
            var tempZ = k*Math.sqrt(Math.abs(r*r - tempX*tempX - tempY*tempY));
            starPoints.push(new Vector3(tempX,tempY,tempZ));
        }
    }


    function projection(v) {
        var v1 = new Vector3();
        v1.x = v.x * distance / Math.abs(cameraPosition.z - v.z);
        v1.y = v.y * distance / Math.abs(cameraPosition.z - v.z);
        v1.z = v.z;
        return v1;
    }

    function pointsProjection(){
        for(var i in starPoints){
            var v = projection(starPoints[i]);
            starPointsForShow.push(v);
        }
    }

    function init(){
        pointsProjection();
        stage = new Stage(c);
        for(var i=0;i<starPointsForShow.length;i++){
            var star = new Bitmap("./picture/star.png");
            star.x = centerPosition.x + starPointsForShow[i].x;
            star.y = centerPosition.x + starPointsForShow[i].y;
            star.scaleX = star.scaleY = 0.5*distance/Math.abs(cameraPosition.z - starPointsForShow[i].z);
            if(starPointsForShow[i].z > 50){
                star.alpha = 1;
            }
            else{
                star.alpha = 0.5;
            }
            stage.addChild(star);
        }
        Ticker.setFPS(20);
        Ticker.addListener(window);
    }

    init();

</script>
</body>
</html>